<!-- 
背景线性渐变
    background: linear-gradient(方位1 方位2 ..., 颜色1, 颜色2, ...);

    1）方位名词
        top         上到下（默认）
        left top    左上到右下
    2）因为兼容性问题，要加浏览器私有前缀
        background: -webkit-linear-gradient();
        其它前缀同理，移动端用【-webkit-】足够了
 -->
<style>
    div {
        width: 300px;
        height: 100px;
        margin: 10px 0;

        /* 不写，默认top，上到下 */
        /* background: -webkit-linear-gradient(red, blue); */
        /* background: -webkit-linear-gradient(cyan, #fff, #000); */

        /* left，左到右 */
        /* background: -webkit-linear-gradient(left, red, blue); */

        /* left top，左上角到右下角 */
        background: -webkit-linear-gradient(left top, red, #000, blue);
    }
</style>

<div></div>
